<template>
  <view class="OrderAddress">
    <view class="formView">
      <view class="form">
        <u-field label="地址" disabled>
          <view slot="right" class="address" @click="chooseLocation">
            <text class="check" v-if="addressName">{{ addressName }}</text>
            <text v-else>点击选择地址</text>
            <u-icon class="arrow" name="arrow-right"></u-icon>
          </view>
        </u-field>
        <u-field v-model="addressDetail" label="门牌号" placeholder="详细地址，如1层101室" input-align="right" :clearable="false">
        </u-field>
        <u-field v-model="name" label="收货人" placeholder="请输入收货人名字" input-align="right" :clearable="false"></u-field>
        <u-field
          v-model="mobile"
          type="number"
          maxlength="11"
          label="手机号码"
          placeholder="请输入手机号"
          input-align="right"
          :clearable="false"
        >
        </u-field>
        <u-field label="设为默认" disabled :border-bottom="false">
          <u-switch slot="right" v-model="defaultFlag" active-color="#4C71EE" :size="48"></u-switch>
        </u-field>
      </view>
    </view>

    <view class="buttonDiv" @click="handleSubmit"> 保存 </view>
    <u-toast ref="uToast" />
    <u-select
      v-model="show"
      mode="mutil-column-auto"
      :list="list"
      label-name="name"
      value-name="code"
      @confirm="addressCheck"
    ></u-select>
  </view>
</template>
<script>

import { addressAlter, getAddressList } from '@/api/address.js';
import dist from '@dcloudio/vue-cli-plugin-hbuilderx/packages/babel-plugin-console';
import { cite } from '@dcloudio/vue-cli-plugin-uni/packages/postcss/tags';
// import { chooseLocation } from '@/utils/jssdk';
export default {
  name: 'OrderAddress',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      lat: '',
      lng: '',
      mobile: '',
      name: '',
      defaultFlag: false,
      addressName: '',
      addressDetail: '',
      areaCode: '',
      cascaderValue: '',
      show: false,
      options: [],
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      // 导航栏内容区域高度，不包括状态栏高度在内
      navbarHeight: 44,
      list: [
        {
          value: 1,
          label: '中国',
          children: [
            {
              value: 2,
              label: '广东',
              children: [
                {
                  value: 3,
                  label: '深圳'
                },
                {
                  value: 4,
                  label: '广州'
                }
              ]
            },
            {
              value: 5,
              label: '广西',
              children: [
                {
                  value: 6,
                  label: '南宁'
                },
                {
                  value: 7,
                  label: '桂林'
                }
              ]
            }
          ]
        },
        {
          value: 8,
          label: '美国',
          children: [
            {
              value: 9,
              label: '纽约',
              children: [
                {
                  value: 10,
                  label: '皇后街区'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  computed: {},
  methods: {
  //   chooseLocation() {
  //     chooseLocation()
  //       .then((res) => {
  //         console.log(res);
  //         this.lat = res.latitude;
  //         this.lng = res.longitude;
  //         this.addressName = res.name;
  //         this.areaCode = res.areaCode;
  //       })
  //       .catch((err) => {
  //         uni.showModal({
  //           content: err
  //         });
  //       });
  //   },
    chooseLocation() {
      uni.request({
        url: this.staticDir + '/area.json', // 请求地址
        method: 'GET', // 请求方法
        success: (res) => {
          console.log(res);
          if (res.statusCode === 200) {
            this.list = res.data;
            this.show = true;
          } else {
            console.error('请求失败，状态码:', res.statusCode);
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
        }
      });
    },
    addressCheck(e) {
      console.log(e);
      this.addressName = e[0].label + '/' + e[1].label + '/' + e[2].label;
      this.areaCode = e[2].value;
    },
    handleSubmit() {
      if (!this.addressDetail || !this.name || !this.mobile || !this.addressName) {
        this.$refs.uToast.show({
          title: !this.addressName
            ? '请选择地址'
            : !this.addressDetail
              ? '请输入门牌号'
              : !this.name
                ? '请输入联系人'
                : !this.mobile
                  ? '请输入手机号'
                  : '',
          duration: '2300'
        });
        return;
      }
      const pd = {
        id: this.id,
        mobile: this.mobile,
        name: this.name,
        areaCode: this.areaCode,
        defaultFlag: this.defaultFlag,
        addressDetail: this.addressDetail,
        province: this.addressName.split('/')[0],
        city: this.addressName.split('/')[1],
        district: this.addressName.split('/')[2]
      };
      addressAlter(pd).then(() => {
        uni.navigateBack();
        uni.$emit('updateAddress');
      });
    }
  },
  watch: {},
  // 页面周期函数--监听页面加载
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
      getAddressList({ pageSize: 999, id: this.id }).then((res) => {
        const item = res.data[0];
        if (item.addressDetail) {
          this.addressDetail = item.addressDetail.split('%$')[1];
          this.addressName = item.addressDetail.split('%$')[0];
        }
        this.mobile = item.mobile;
        this.name = item.name;
        this.defaultFlag = item.defaultFlag;
      });
    }
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
.OrderAddress {
  padding: 28rpx 32rpx 0;
  background: #f7f8f9;
  min-height: calc(100vh - 88rpx - env(safe-area-inset-top));
  @import './index.scss';
}
</style>
